import scss from '../../assets/styles/cloudmap.module.scss';


interface MCateDespProps {
    clouditemList: any[];
    clickCounter: (id: any, value: any, key: any) => void;
}

export const MCateDesp = ({ clouditemList, clickCounter }: MCateDespProps) => {
    return <div className={scss['cate-article-meta']}>
        <ul className={scss['cate-content-article']}>
            {
                clouditemList.map((item, index) => {
                    return <li key={index + item.key}>
                        <div onClick={() => clickCounter(item.id, item.type, item.key)}>{item.title}</div>
                        {
                            item.status && item.data.length > 0 ? <ul>
                                {
                                    item.data.map((item1: any, index: any) => {
                                        return <li key={index + item1.key}>
                                            <div onClick={() => clickCounter(item1.id, item1.type, item1.key)}>{item1.title}</div>
                                        </li>
                                    })
                                }
                            </ul> : <></>
                        }
                    </li>
                })
            }
        </ul>
    </div>
}

interface MCodesProps {
    clouditemList: any[];
    clickCounter: (id: any, value: any, key: any) => void;
}

export const MCodes = ({ clouditemList, clickCounter }: MCodesProps) => {
    return <div className={scss['cate-decode-meta']}>
        <p>

        </p>
    </div>
}


// 代码组件
interface MPreProps {
    data: any;
    clickCounter?: (id: any, value: any, key: any) => void;
}

export const MPre = ({ data }: MPreProps) => {
    return <div >
        <pre className={scss['cate-decode-pre']}>
            {data}
        </pre>
    </div>
}

// 一级标题
interface MTitlesProps {
    data: any;
    clickCounter?: (id: any, value: any, key: any) => void;
}

export const MTitles = ({ data }: MTitlesProps) => {
    return <span >
        <br />
        <h1>{data}</h1>
    </span>
}
// 二级标题
interface MfullTitleProps {
    data: any;
    clickCounter?: (id: any, value: any, key: any) => void;
}

export const MfullTitle = ({ data }: MfullTitleProps) => {
    return <div >
        <br />
        <h2>{data}</h2>
    </div>
}
// 文字组件
interface MItemProps {
    data: any;
    clickCounter?: (id: any, value: any, key: any) => void;
}

export const MItem = ({ data }: MItemProps) => {
    return <div >
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   {data}</p>
    </div>
}